<script setup>
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const props = defineProps({
		config: {
			type: Object,
			default: () => config
		}
	})
	const container = computed(() => ({
		display: 'flex',
		flexDirection: ['top', 'bottom'].includes(props.config.style.imgPosition) ? 'column' : 'row',
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))
	const titleStyle = computed(() => ({
		fontSize: props.config.style.titleSize + 'px',
		color: props.config.style.titleColor,
		fontWeight: props.config.style.titleWeight ? 800 : 500,
		fontStyle: props.config.style.titleStyle ? 'italic' : '',
		textDecoration: props.config.style.titleLine ? 'underline' : '',
		textAlign: props.config.style.align,
		marginTop: ['top'].includes(props.config.style.imgPosition) ? '15px' : '0px'
	}))
	const dataStyle = computed(() => ({
		fontSize: props.config.style.dataSize + 'px',
		color: props.config.style.dataColor,
		fontWeight: props.config.style.dataWeight ? 800 : 500,
		fontStyle: props.config.style.dataStyle ? 'italic' : '',
		textDecoration: props.config.style.dataLine ? 'underline' : '',
		lineHeight: props.config.style.spacing + 'px',
		marginTop: '15px'
	}))
	const imgBoxStyle = computed(() => ({
		borderTopLeftRadius: props.config.style.imagRTL + 'px',
		borderTopRightRadius: props.config.style.imgRTR + 'px',
		borderBottomLeftRadius: props.config.style.imgRBL + 'px',
		borderBottomRightRadius: props.config.style.imgRBR + 'px',
		width: ['left', 'right'].includes(props.config.style.imgPosition) ? '40%' : '100%',
		height: ['left', 'right'].includes(props.config.style.imgPosition) ? '100%' : '40%',
		overflow: 'hidden'
	}))
	const content = computed(() => ({
		marginLeft: props.config.style.imgPosition === 'left' ? '15px' : '0px',
		marginRight: props.config.style.imgPosition === 'right' ? '15px' : '0px',
		marginTop: props.config.style.imgPosition === 'top' ? '15px' : '0px',
		marginBottom: props.config.style.imgPosition === 'bottom' ? '15px' : '0px',
		height: ['left', 'right'].includes(props.config.style.imgPosition) ? '100%' : 'inherit'
	}))

	const formState = ref(cloneDeep(config.data))
	const dataSource = ref({})
	const oldDataSetJson = ref({})
	// 获取数据源数据函数
	const fetchChartData = async (isFlag = false) => {
		const { dataSetType, dataSetJson } = props.config.dataSetConfig
		const isNew = isFlag || JSON.stringify(oldDataSetJson.value) !== JSON.stringify(dataSetJson)

		// 如果是静态数据
		formState.value = props.config.data
		if (dataSetType === 0) return
		// 仅在 dataSetId 实际改变时才重新获取数据
		if (dataSetType === 1 && dataSetJson && Object.keys(dataSetJson).length > 0 && isNew) {
			// 更新值
			oldDataSetJson.value = dataSetJson
			// 模拟接口返回下拉数据
			await datasetApi.preview(dataSetJson).then((res) => {
				dataSource.value = res[0] || {}
				// 模拟接口返回数据源
				formState.value.title.value = dataSource.value[props.config.data.title?.field]
				formState.value.image.value = dataSource.value[props.config.data.image.field]
				formState.value.content.value = dataSource.value[props.config.data.content.field]
			})
		} else {
			if (Object.keys(dataSource.value).length === 0) return
			formState.value.title.value = dataSource.value[props.config.data.title?.field]
			formState.value.image.value = dataSource.value[props.config.data.image.field]
			formState.value.content.value = dataSource.value[props.config.data.content.field]
		}
	}

	const onReload = (isFlag = false) => {
		fetchChartData(isFlag)
	}
	defineExpose({ onReload })
</script>

<template>
	<div class="container flex items-center h-full pl-2 py-1" :style="{ ...container }">
		<div class="img-box" :style="{ ...imgBoxStyle }" v-if="['left', 'top'].includes(props.config.style.imgPosition)">
			<img :src="formState.image.value" alt="" style="height: 100%; width: 100%" />
		</div>
		<div class="w-[100%] overflow-hidden" :style="content">
			<div class="font-7" :style="{ ...titleStyle }">{{ formState.title.value }}</div>
			<div :style="{ ...dataStyle }">
				{{ formState.content.value }}
			</div>
		</div>
		<div
			class="img-box"
			:style="{ ...imgBoxStyle }"
			v-if="['right', 'bottom'].includes(props.config.style.imgPosition)"
		>
			<img :src="formState.image.value" alt="" style="height: 100%; width: 100%" />
		</div>
	</div>
</template>

<style scoped lang="less">
	.container {
		// 修改圆角半径为不同的值
		// border-radius: 10px; // 调整为图片中的圆角弧度
		// 添加阴影效果
		// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
		padding: 20px; // 增加内边距
		// background-color: white;
	}

	.img-box {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 50%; // 确保宽度和高度相同以实现圆形
		height: 100%;
		background-color: #90caf8e2;
	}
</style>
